<template>
  <div class="map-page">
    <div ref="dom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, onMounted, defineProps } from "vue"
const dom = ref(null)
const props = defineProps({
  SuspiciousAndOutlierData: {
    type: Object,
    required: true
  }
})
const transformData = (inputData) => {
  const typeName = inputData.map(item => item.ItemName);
  const suspiciousData = inputData.map(item => item.SuspiciousCount);
  const outlierData = inputData.map(item => item.OutlierCount);

  const list = [
    { name: "发生可疑的次数", data: suspiciousData },
    { name: "发生离群的次数", data: outlierData },
  ];
  const charesData = {
    typeName,
    list
  }
  initCharts(charesData)
}
const initCharts = (charesData) => {
  const colorList = {
    发生可疑的次数: "#EB9A43",
    发生离群的次数: "#C4232A",
  }
  function getColor(name) {
    if (Object.hasOwnProperty.call(colorList, name)) {
      return colorList[name];
    } else {
      // 随机生成颜色
      return "#" + Math.floor(Math.random() * 16777215).toString(16);
    }
  }
  const series = charesData.list.map((e) => {
    const color = getColor(e.name)
    const item = {
      name: e.name,
      type: "bar",
      smooth: false,
      barWidth: 23,
      symbolSize: 8,
      zlevel: 3,
      stack: "Ad",
      showBackground: true,
      backgroundStyle: {
        color: "rgba(255, 255, 255, 0.24)",
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: color, // 0% 处的颜色
            },
            {
              offset: 1,
              color: color, // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: e.data,
    }
    return item
  })
  const charts = echarts.init(dom.value)
  const option = {
    legend: {
      top: "5px",
      show: true,
      left: "0%",
      itemWidth: 13,
      itemHeight: 13,
      textStyle: {
        color: "#ffffff",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      x: "7%",
      y: "15%",
      x2: "3%",
      y2: "7%",
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
          },
        },
        axisLabel: {
          show: true,
          // margin: 20,
          textStyle: {
            color: "#ffffff",
          },
        },
        axisTick: {
          show: false,
        },
        // boundaryGap: true,
        data: charesData.typeName,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
          },
        },
        axisLabel: {
          show: true,
          // margin: 20,
          textStyle: {
            color: "#ffffff",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: series,
  }
  option && charts.setOption(option)
}
onMounted(() => {
  transformData(props.SuspiciousAndOutlierData);
})
</script>

<style lang="scss" scoped>
.map-page {
  height: 100%;
  width: 100%;
}
</style>
